<template>
  <div>
    <el-card>
      <el-row :gutter="20">

        <!--靶场搜索框-->
        <el-col :span="8">
          <el-input placeholder="请输靶场名称" clearable v-model="keyword">
            <el-button slot="append" icon="el-icon-search" @click="initRoleList"></el-button>
          </el-input>
        </el-col>

        <!--添加靶场按钮-->
        <el-col :span="4">
          <el-button type="primary" @click="showAddForm">添加靶场</el-button>
        </el-col>

      </el-row>

      <!--显示角色搜索结果项列表-->
      <el-table :data="RangesList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="靶场名称" prop="rangeName"></el-table-column>
        <el-table-column label="靶场类别" prop="rangeType">
          <template v-slot:default="scope">
            {{ getTypeName(scope.row.rangeType) }}
          </template>
        </el-table-column>
        <el-table-column label="累计访问人数" prop="visitorsCount"></el-table-column>
        <el-table-column label="难度" prop="difficulty">
          <template v-slot:default="scope">
            {{ getDifficulty(scope.row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click.prevent="showUpdateForm(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click.prevent="del(scope.row.rangeId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </el-card>


    <!--添加靶场对话框-->
    <el-dialog title="添加角色" :visible.sync="addFormRanges" @close="closeAddForm" :close-on-click-modal="false">

      <!--具体表单-->
      <el-form ref="addForm" :rules="addRoleRules" :model="addRanges" label-width="150px" size="mini">

        <el-form-item label="靶场名称" prop="rangeName">
          <el-input v-model="addRanges.rangeName"></el-input>
        </el-form-item>

        <el-form-item label="靶场详情">
          <el-input v-model="addRanges.rangeDetail" type="textarea"/>
        </el-form-item>

        <el-form-item label="靶场类别" prop="rangeType">
          <el-select v-model="addRanges.rangeType" placeholder="请选择靶场类别">
            <el-option
                v-for="type in RangesTypeList"
                :label="type.rangeTypeName"
                :value="type.rangeTypeId"
            />

          </el-select>
        </el-form-item>

        <el-form-item label="试验路径">
          <el-input v-model="addRanges.testFilePath"></el-input>
        </el-form-item>

        <el-form-item label="过程解析">
          <el-input v-model="addRanges.process" type="textarea"/>
        </el-form-item>

        <el-form-item label="靶场难度" prop="difficulty">
          <el-select v-model="addRanges.difficulty" placeholder="请选择靶场难度">
            <el-option label="简单" value="1"/>
            <el-option label="中等" value="2"/>
            <el-option label="困难" value="3"/>
          </el-select>
        </el-form-item>

        <el-form-item label="文件类型" prop="fileType">
          <el-select v-model="addRanges.fileType" placeholder="请选择文件类型">
            <el-option label="镜像" value="1"/>
            <el-option label="war包" value="2"/>
            <el-option label="zip" value="3"/>
            <el-option label="普通文件" value="4"/>
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddForm">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </div>

    </el-dialog>


    <!--修改靶场对话框-->
    <el-dialog title="修改角色" :visible.sync="updateFormVisible" @close="closeUpdateForm"
               :close-on-click-modal="false">

      <!--具体表单-->
      <el-form ref="updateForm" :rules="updateRoleRules" :model="updateRole" label-width="150px" size="mini">

        <el-form-item label="靶场名称" prop="rangeName">
          <el-input v-model="updateRole.rangeName"></el-input>
        </el-form-item>

        <el-form-item label="靶场详情">
          <el-input v-model="updateRole.rangeDetail" type="textarea"/>
        </el-form-item>

        <el-form-item label="靶场类别" prop="rangeType">
          <el-select v-model="updateRole.rangeType" placeholder="请选择靶场类别">
            <el-option
                v-for="type in RangesTypeList"
                :label="type.rangeTypeName"
                :value="type.rangeTypeId"
            />

          </el-select>
        </el-form-item>

        <el-form-item label="试验路径">
          <el-input v-model="updateRole.testFilePath"></el-input>
        </el-form-item>

        <el-form-item label="过程解析">
          <el-input v-model="updateRole.process" type="textarea"/>
        </el-form-item>

        <el-form-item label="靶场难度" prop="difficulty">
          <el-select v-model="updateRole.difficulty" placeholder="请选择靶场难度">
            <el-option label="简单" :value="1"/>
            <el-option label="中等" :value="2"/>
            <el-option label="困难" :value="3"/>
          </el-select>
        </el-form-item>

        <el-form-item label="文件类型" prop="fileType">
          <el-select v-model="updateRole.fileType" placeholder="请选择文件类型">
            <el-option label="镜像" :value="1"/>
            <el-option label="war包" :value="2"/>
            <el-option label="zip" :value="3"/>
            <el-option label="普通文件" :value="4"/>
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUpdateForm">取 消</el-button>
        <el-button type="primary" @click="submitupdateForm">确 定</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
export default {
  name: "RoleList",
  data() {
    return {
      keyword: "", //要搜索的靶场名称
      RangesList: [], //靶场搜索结果
      RangesTypeList: [], //靶场的类别
      currentPage: 1,
      pageSize: 5,
      total: 0,
      //添加靶场相关
      addFormRanges: false,
      addRoleRules: {
        rangeName: [
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        rangeType: [
          {required: true, message: "类型为必选项", trigger: "blur"}
        ],
        difficulty: [
          {required: true, message: "难度为必选项", trigger: "blur"}
        ],
        fileType: [
          {required: true, message: "文件类型为必选项", trigger: "blur"}
        ]
      },
      addRanges: {
        rangeName: '',
        rangeDetail: '',
        rangeType: '',
        testFilePath: '',
        process: '',
        difficulty: '',
        fileType: '',
      },
      //修改靶场相关
      updateFormVisible: false,
      updateRoleRules: {
        rangeName: [
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        rangeType: [
          {required: true, message: "类型为必选项", trigger: "blur"}
        ],
        difficulty: [
          {required: true, message: "难度为必选项", trigger: "blur"}
        ],
        fileType: [
          {required: true, message: "文件类型为必选项", trigger: "blur"}
        ]
      },
      updateRole: {
        id: 0,
        rangeName: '',
        rangeDetail: '',
        rangeType: '',
        testFilePath: '',
        process: '',
        difficulty: '',
        fileType: '',
      },
    };
  },
  computed: {
    getTypeName() {
      return (rangeType) => {
        for (let i = 0; i < this.RangesTypeList.length; i++) {
          if (rangeType == this.RangesTypeList[i].rangeTypeId) {
            return this.RangesTypeList[i].rangeTypeName;
          }
        }
      }
    },
    getDifficulty() {
      return (difficulty) => {
        switch (difficulty) {
          case 1:
            return "简单"
          case 2:
            return "中等"
          case 3:
            return "困难"
        }
      }
    }
  },
  methods: {
    // 初始化 列表
    initRoleList() {
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      }

      this.$axios.post("/range/selectRangeCopy", params)
          .then(response => {
            let pageData = response.data;
            // console.log(response.data)
            if (pageData.total > 0) {
              this.RangesList = pageData.records;
              this.currentPage = pageData.current;
              this.pageSize = pageData.size;
              this.total = pageData.total;
            } else {
              this.$message({
                message: " error! ",
                type: 'error',
                duration: 2000
              })
            }

          })
    },
    // 初始化类型
    initRangesType() {
      this.$axios.get("/rangetype/categories").then(res => {
        let rangesTypeData = res.data;
        if (rangesTypeData.length > 0) {
          this.RangesTypeList = rangesTypeData;
        }
      })
    }
    ,
    handleSizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.initRoleList();
    }
    ,
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initRoleList();
    }
    ,
    showAddForm() {
      this.addFormRanges = true;
    }
    ,
    closeAddForm() {
      this.addFormRanges = false;
      this.$refs.addForm.resetFields();
    }
    ,
    //添加 靶场
    submitAddForm() {
      this.$refs.addForm.validate(isValid => {
        //表单校验
        if (!isValid) {
          this.$message({
            message: "请正确填写表单",
            type: 'error',
            duration: 2000
          })
          return;
        }

        this.$axios.post("/range/addRange", this.addRanges)
            .then(response => {
              if (response.data == "okk") {
                this.$message({
                  message: "添加成功",
                  type: 'success',
                  duration: 2000
                })
                this.closeAddForm();
                this.initRoleList()
              } else {
                this.$message({
                  message: "添加失败",
                  type: 'error',
                  duration: 2000
                })
              }
            })
      })
    }
    ,
    //修改靶场相关
    showUpdateForm(role) {

      this.updateRole.rangeId = role.rangeId
      this.updateRole.rangeName = role.rangeName
      this.updateRole.rangeDetail = role.rangeDetail
      this.updateRole.rangeType = role.rangeType
      this.updateRole.testFilePath = role.testFilePath
      this.updateRole.process = role.process
      this.updateRole.difficulty = role.difficulty
      this.updateRole.fileType = role.fileType

      this.updateFormVisible = true;
    }
    ,
    closeUpdateForm() {
      this.updateFormVisible = false;
      this.$refs.updateForm.resetFields();
    }
    ,
    submitupdateForm() {
      this.$refs.updateForm.validate(isValid => {

        //表单校验
        if (!isValid) {
          this.$message({
            message: "请正确填写表单",
            type: 'error',
            duration: 2000
          })
          return;
        }

        this.$axios.post("/range/updateRange", this.updateRole)
            .then(response => {

              if (response.data == "okk") {
                this.$message({
                  message: "修改成功",
                  type: 'success',
                  duration: 2000
                })
                this.closeUpdateForm();
                //刷新当前页数据
                this.initRoleList();
              } else {
                this.$message({
                  message: "修改失败",
                  type: 'error',
                  duration: 2000
                })
              }

            })
            .catch(error => {
              console.log(error)
            })

      })

    }
    ,
    del(id) {
      // console.log(this.RangesList)

      this.$confirm('此操作将永久删除该角色,是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //确定

        this.$axios.delete("range/delRange/" + id)
            .then(response => {
              if (response.data == "okk") {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                  duration: 2000
                });
                this.currentPage = 1
                //刷新当前页
                this.initRoleList();

              } else {
                this.$message({
                  type: 'error',
                  message: "删除失败",
                  duration: 2000
                });
              }

            })

      }).catch(() => {
        //取消
        this.$message({
          type: 'success',
          message: '已取消删除'
        });
      })

    },
  },
  created() {
    this.initRoleList();
    this.initRangesType();
  }

}
</script>

<style scoped>

</style>